<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="/xlive/script/xlv.js"></script>
</head>
<body>
   <div id="order_main" style="font-family:'Arial';width:760px;min-height:520px;background:url(/xlive/images/rst/water.jpg) repeat top left; margin:auto; float:left"
    	 xlvobject="xlv.obj.pane" 
    >
    	<style>
    		#order_main * #order_pattern {
    			position:relative;clear:both;cursor:pointer;
    			float:left;width:224px;
    			padding:0 0 8px 0;
    		}
    		#order_main * #order_pattern #order_content {
    			background:url(/xlive/web/img?method=png&c=000000&o=0.35) repeat;
    			border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
    			padding:8px;
    			font-size:12px;
    			color:white;
    			margin:2px;
    		}
    		#order_main * #order_pattern.selectedOrder #order_content {
    			border:2px solid pink;
    			margin:0px;
    		}
    		#order_main * #order_pattern.selectedOrder #timer {
    			color:pink;
    		}
    	</style>
    	
    	
         <div xlvobject="xlv.obj.dmTrigger"
         	 xlvprop="{
         	 	dmName:'order',
         	 	listener:{when:'afterModelChanged',notify:'setChanged',memoType:'create'}
         	 }"
         	 xlvmethod="{
         	 	mvc_afterModelChanged:function(dm,notify,memo){
         	 		if(notify=='setChanged' &amp;&amp; memo.methods=='get-goods') {
         	 			return this.getParentById('order_main').$V.order_detail.reBuild();
         	 		}
         	 		if(notify=='setChanged' &amp;&amp; memo.methods=='list') {
         	 			return this.getParentById('order_main').$V.orderlist_toolbar.refresh(dm);
         	 		}
         	 		if(notify=='setChanged' &amp;&amp; memo.methods=='set-order'){
         	 			var pd=dm.getValue('set-order/processed');
         	 			if(pd != 0){
         	 				var key=dm.getValue('set-order/key');
         	 				var order=dm.xml_selectSingleNode('properties/orders/order[key=\''+key+'\']');
         	 				if(order) order.parentNode.removeChild(order);
         	 				this.getParentById('order_main').$V.orders.buildAll(dm);
         	 				this.getParentById('order_main').$V.orderlist_toolbar.refresh(dm);
         	 			}
         	 		}
         	 	}
         	 }"
         >
         </div>
         <div xlvobject="xlv.obj.dmTrigger"
         	 xlvprop="{
         	 	dmName:'gae-channel',
         	 	listener:{when:'afterModelChanged',notify:'setChanged',memoType:'create'}
         	 }"
         	 xlvmethod="{
         	 	mvc_afterModelChanged:function(dm,notify,memo){
         	 		if(notify=='setChanged' &amp;&amp; memo.methods=='receive-message') {
         	 			this.getParentById('order_main').$V.orderlist_toolbar.notifyNewOrder();
         	 		}
         	 	}
         	 }"
         >
         </div>
    	

 		<div id="left_pane" style="width:240px;overflow:hidden;float:left"
 			 xlvobject="xlv.obj.generic"
 		 	xlvmethod="{
 		 		initial:function(){
 		 			this.$self('initial');
 		 			this.getParentById('order_main').$V.left_pane=this;
 		 			this.$V.canvas=xlv.util.findChild(this,{id:'left_canvas'},false,false);
 		 		},
 		 		showPane:function(index){
					var option={element:this,properties:{},duration:300};
					option.properties.scrollLeft=index*240;
					xlv.util.styleEffect(option);
 		 		}
 		 	}"
 		>
 	 		<div id="left_canvas" style="width:500px">
 	 			<div style="position:relative;float:left;width:240px;overflow:hidden">
 		    		<div id="orderlist_toolbar" style="background:url(/xlive/images/rst/headerBg_240.png) no-repeat left top; height:48px; line-height:30px; padding:6px;"
 		    			xlvobject="xlv.obj.generic"
 		    			xlvmethod="{
 		    				initial:function(){
 		    					this.getParentById('order_main').$V.orderlist_toolbar=this;
 		    					this.addEventHandler('click','_click');
 		    				},
 		    				_click:function(event){
 		    					if(event.target.id=='refresh_order'){
 		    						var dm=this.getDataModel('order');
 		    						dm.webMethod('list');
 		    						this.notifyNewOrder(true);
 		    					}
 		    				},
 		    				refresh:function(dm){
 		    					dm=(dm||this.getDataModel('order'));
 		    					var os=dm.xml_selectNodes('properties/orders/order');
 		    					xlv.util.setElementValue(xlv.util.findChild(this,{id:'count'},false,false),os.length);
 		    				},
 		    				notifyNewOrder:function(clear){
 		    					var pin=xlv.util.findChild(this,{id:'pin'},false,false);
 		    					var pin_value=xlv.util.findChild(this,{id:'pin_value'},false,false);
 		    					if(clear===true){
 		    						pin.style.display='none';
 		    						return xlv.util.setElementValue(pin_value,0);
 		    					}
 		    					var v=parseInt(xlv.util.getElementValue(pin_value));
 		    					v=isNaN(v)?0:v;
 		    					xlv.util.setElementValue(pin_value,v+1);
 		    					pin.style.display='';
 		    				}
 		    			}"
 		    		>
 		 				<span style="float:left;color:white">訂單
 		 					<span id="count" style="font-size:11px;line-height:11px;padding:2px 4px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;background:url(/xlive/web/img?method=png&c=ffffff&o=0.3) top left repeat"></span>
 		 				</span>
 		 				<div style="float:right;position:relative;margin:2px 8px 0px 2px">
            				<div id="refresh_order" style="background:url(/xlive/images/rst/btnd_left.png) no-repeat left top; color:#FFF; text-decoration:none; padding:0px 6px 0px 6px;display:inline-block">
            					<span id="refresh_order" style="cursor:pointer;background:url(/xlive/images/rst/btnd_right.png) no-repeat right top; padding:0px 6px 10px 6px; margin-right:-10px;float:left; display:inline-block;line-height:24px; line-height:30px\9; font-size:13px;">
            					 新進訂單
            					</span>
            				</div>
            				<div id="pin" style="position:absolute;top:-1px;left:-6px;display:none">
            					<div style="float:left;background:url(/xlive/images/rst/pin_left.png) no-repeat left top; padding:0px 4px 3px 6px; display:inline-block; line-height:16px; position:relative; top:-5px; right:10px; font-size:11px;">
                        			<span id="pin_value" style="background:url(/xlive/images/rst/pin_right.png) no-repeat right top; margin-right:-14px; padding:0px 8px 4px 3px; color:#FFF; display:inline-block; text-align:left; font-family:Verdana;">
                        			</span>
                        		</div>
                        	</div>
            			</div>
 		 			</div>
 		 			<div style="float:left;width:240px;">
		 				<div id="orders" style="float:left;width:224px;padding:8px" 
 		 	  				xlvobject="xlv.obj.viewer" xlvprop="{dmName:'order'}"
 		 	  				xlvmethod="{
 		 	  					construct:function(){
									this._pattern=xlv.util.findChild(this,{id:'order_pattern'},false,false);
									if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
									this.$self('construct');
									this.getParentById('order_main').$V.orders=this;
 		 	  					},
 		 	  					initial:function(){
 		 	  						this.$self('initial');
 		 	  						this.addEventHandler('click', '_click');
 		 	  						this.$V.interval=setInterval(function(){this.interval();}.bind(this),50000);
 		 	  						this.$V.selectedOrder=null;
 		 	  					},
 		 	  					dispose:function(){
 		 	  						clearInterval(this.$V.interval);
 		 	  					},
 		 	  					_click:function(event){
 		 	  						var pat=this.targetElement(event.target,{id:'order_pattern'});
 		 	  						if(pat) this.clickOrderPattern(pat);
 		 	  					},
 		 	  					clickOrderPattern:function(pat){
 		 	  						if(this.$V.selectedOrder)Element.removeClassName(this.$V.selectedOrder,'selectedOrder');
 		 	  						Element.addClassName(this.$V.selectedOrder=pat,'selectedOrder');
 		 	  						var got=this.getDataModel('order').selectOrder(pat._node);
 		 	  						if(got) this.getParentById('order_main').$V.order_detail.reBuild();
 		 	  					},
 		 	  					interval:function(){
 		 	  						var pats=xlv.util.children(this,{id:'order_pattern'},false,false);
 		 	  						var d=new Date().getTime();
 		 	  						for(var i=0;i &lt; pats.length;++i){
 		 	  							var t=xlv.util.findChild(pats[i],{id:'timer'},false,false);
 		 	  							if(!t)continue;
 		 	  							var d2=(d-t._time)/1000;
 		 	  							var day=Math.floor(d2/86400);
 		 	  							var h=Math.floor((d2=d2%86400)/3600);
 		 	  							var s=Math.floor((d2=d2%3600)/60);
 		 	  							var msg=((day)?day+'&nbsp;天&nbsp;':'')+((h)?h+'&nbsp;時&nbsp;':'')+s+'&nbsp;分前';
 		 	  							xlv.util.setElementValue(t,msg);
 		 	  						}
 		 	  						
 		 	  					},
 		 	  					mvc_afterModelChanged:function(dm,notify,memo){
 		 	  						if(notify=='setChanged' &amp;&amp; memo.methods=='list')return this.buildAll(dm);
 		 	  					},
 		 	  					buildAll:function(dm){
 		 	  						dm=(dm||this.getDataModel());
 		 	  						var idx=0,sel=0,key;
 		 	  						while(this.firstChild) {
 		 	  							if(this.firstChild.id=='order_pattern'){
 		 	  								if(Element.hasClassName(this.firstChild,'selectedOrder')){
 		 	  									sel=idx;
 		 	  									key=xlv.util.getXmlNodeValue('key',this.firstChild._node);
 		 	  								}
 		 	  								++idx;
 		 	  							}
 		 	  							xlv.sys.dispose(this.firstChild,true);
 		 	  						}
 		 	  						var nodes = dm.xml_selectNodes('properties/orders/order');
 		 	  						var selpat=null,pat;
 		 	  						for(var i=0;i &lt; nodes.length;++i){
 		 	  							pat=xlv.sys.clonePatternNode(this._pattern);
            							this.appendChild(pat);
            							pat._node=nodes[i];
            							this.fillOrder(pat);
            							xlv.sys.initialize(pat);
            							if(!selpat &amp;&amp; i==sel)selpat=pat;
            							if(key==xlv.util.getXmlNodeValue('key',pat._node))selpat=pat;
            						}
            						this.interval();
             						selpat=(selpat||pat);
            						if(selpat)this.clickOrderPattern(selpat);
            						else this.getParentById('order_main').$V.order_detail.build(null);
 		 	  					},
 		 	  					refreshCurrentOrder:function(){
 		 	  						if(this.$V.selectedOrder)this.fillOrder(this.$V.selectedOrder);
 		 	  					},
 		 	  					fillOrder:function(pat){
 		 	  						var node=pat._node;
 		 	  						xlv.util.setElementValue(xlv.util.findChild(pat,{id:'id'},false,false),xlv.util.getXmlNodeValue('id',node));
 		 	  						xlv.util.setElementValue(xlv.util.findChild(pat,{id:'name'},false,false),xlv.util.getXmlNodeValue('name',node));
 		 	  						var d = xlv.util.getXmlNodeValue('date',node);
 		 	  						d=new Date().parseDate(d).formatDate('yyyy-MM-dd HH:mm');
		 	  						xlv.util.setElementValue(xlv.util.findChild(pat,{id:'date2'},false,false),d);
		 	  						xlv.util.setElementValue(xlv.util.findChild(pat,{id:'total'},false,false),xlv.util.getXmlNodeValue('total',node));
		 	  						xlv.util.setElementValue(xlv.util.findChild(pat,{id:'status'},false,false),xlv.util.getXmlNodeValue('status',node));
		 	  						var t=xlv.util.findChild(pat,{id:'timer'});
		 	  						t._time=new Date().parseDate(xlv.util.getXmlNodeValue('date',node)).getTime();
 		 	  					}
 		 	  				}"
 		 				>
 		 					<div id="order_pattern" >
 		 						<div id="order_content">
 		 							<div id="id" style="float:left;line-height:20px;font-size:14px;"></div>
 		 							<div style="float:right;line-height:20px;padding-right:4px;font-size:12px;">$<span id="total"></span></div>
 		 							<div id="name" style="float:right;line-height:20px;font-size:12px;padding-right:8px"></div>
 		 							<div style="clear:both"></div>
 		 							<div id="date2" style="float:left;line-height:16px;"></div>
 		 							<div id="timer" style="float:right;line-height:16px;font-size:11px;padding-right:4px"></div>
 		 							<div style="clear:both"></div>
 		 							<div id="status" style="float:left;line-height:20px;"></div>
 		 							<div style="clear:both"></div>
 		 						</div>
 		 					</div>
 		 				</div>
 		 			</div>
 		 		</div>
     		</div>         
		</div>
	
 		<div id="right_pane" style="position:relative;width:520px;float:left;overflow:hidden"
 		 	xlvobject="xlv.obj.generic"
 		 	xlvmethod="{
 		 		initial:function(){
 		 			this.$self('initial');
 		 			this.getParentById('order_main').$V.right_pane=this;
 		 			this.$V.canvas=xlv.util.findChild(this,{id:'right_canvas'},false,false);
 		 		},
 		 		showPane:function(index){
					var option={element:this,properties:{},duration:300};
					option.properties.scrollLeft=index*520;
					xlv.util.styleEffect(option);
 		 		}
 		 	}"
 		>
 			<div id="right_canvas" style="float:left;position:relative;width:1200px;">	
     	 		<div id="order_detail" xlvobject="xlv.obj.slideBox" style="float:left;width:520px;padding:0px;overflow:hidden"
     	 			xlvmethod="{
 		 	  			construct:function(){
 		 	  				this.$self('construct');
							this._pattern=xlv.util.findChild(this,{id:'detail_pattern'},false,false);
							if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
							this.getParentById('order_main').$V.order_detail=this;
 		 	  			},
 		 	  			initial:function(){
 		 	  				this.$self('initial');
 		 	  			},
 		 	  			_click:function(event){
 		 	  				if(event.target.id=='status'||event.target.id=='advance'){
 		 	  					event.stop();
 		 	  					var node=xlv.util.selectXmlSingleNode('status',this.$P.pNode);
 		 	  					return this.getParentById('order_main').$V.update_status.open(event.target.parentNode,node);
 		 	  				}
 		 	  				if(event.target.id=='cancel_order'){
 		 	  					event.stop();
 		 	  					var id=xlv.util.getXmlNodeValue('id',this.$P.pNode);
 		 	  					if(confirm('取消訂單 :'+id)){
 		 	  						var key=xlv.util.getXmlNodeValue('key',this.$P.pNode);
 		 	  						var dm=this.getDataModel('order');
 		 	  						xlv.util.setXmlNodeValue('processed',this.$P.pNode,'-1');
 		 	  						dm.updateOrder(key);
 		 	  					}
 		 	  					//return this.getParentById('order_main').$V.set_status.open(event.target.parentNode,this.$P.pNode);
 		 	  					return;
 		 	  				}
 		 	  				if(event.target.id=='complete_order'){
 		 	  					event.stop();
 		 	  					var id=xlv.util.getXmlNodeValue('id',this.$P.pNode);
 		 	  					if(confirm('訂單 完成 :'+id)){
 		 	  						var key=xlv.util.getXmlNodeValue('key',this.$P.pNode);
 		 	  						var dm=this.getDataModel('order');
 		 	  						xlv.util.setXmlNodeValue('processed',this.$P.pNode,'1');
 		 	  						dm.updateOrder(key);
 		 	  					}
 		 	  					return;
 		 	  				}
 		 	  				this.$self('_click',event);
 		 	  			},
 		 	  			updateRefresh:function(){
 		 	  				xlv.util.setElementValue(this.$V.status,(xlv.util.getXmlNodeValue('status',this.$P.pNode)||'&nbsp;'));
 		 	  				this.getDataModel('order').updateOrder(xlv.util.getXmlNodeValue('key',this.$P.pNode));
 		 	  			},
 		 	  			reBuild:function(){
 		 	  				var dm=this.getDataModel('order');
 		 	  				var key=dm.getValue('get-goods.key');
 		 	  				var node=dm.getNode('orders/order[key=\''+key+'\']');
 		 	  				if(node) this.build(node);
 		 	  			},
 		 	  			build:function(node){
							this.$P.pNode=node;
							this._createBox(node);
						},
						_slideToBox:function(box){
							if(!box)return;
							this.boxForToolBar(box);
							var option={element:this.$V.viewport,properties:{},duration:300};
							option.properties.scrollLeft=box.offsetLeft;
							option.finished=function(){
								var olds=xlv.util.children(option.element,{id:'slidebox_box'})||null;
								if(olds &amp;&amp; olds.length &gt; 1) xlv.sys.dispose(olds[0],true);
								option.element.scrollLeft=0;
							}
							xlv.util.styleEffect(option);
						},
						nodeForBox:function(node,box){
							box.pNode=node;
							while(box.firstChild)xlv.sys.dispose(box.firstChild,true);
							if(node){
								var pat=xlv.sys.clonePatternNode(this._pattern);
								box.appendChild(pat);
								xlv.sys.initialize(pat);
								this.fillOrderSheet(pat,node);
								var count=xlv.util.getXmlNodeValue('goods-list/@count',node);
								var qty=xlv.util.getXmlNodeValue('goods-list/@countQty',node);
								xlv.util.setElementValue(xlv.util.findChild(pat,{id:'detail_count'},false,false),'計&nbsp;:&nbsp;'+count+'&nbsp;筆 &nbsp;'+qty+'&nbsp;項&nbsp;');
								xlv.util.findChild(pat,{id:'detail_goods'},false,false).build(node);
							}
						},
						boxForToolBar:function(box){
							var node=box.pNode;
							var id=xlv.util.findChild(this.$V.toolBar,{id:'order_id'},false,false);
							var name=xlv.util.findChild(this.$V.toolBar,{id:'order_name'},false,false);
							var date2=xlv.util.findChild(this.$V.toolBar,{id:'order_date2'},false,false);
							var total=xlv.util.findChild(this.$V.toolBar,{id:'order_total'},false,false);
							xlv.util.setElementValue(id,(node)?xlv.util.getXmlNodeValue('id',node):'');
							xlv.util.setElementValue(name,(node)?xlv.util.getXmlNodeValue('name',node):'');
							xlv.util.setElementValue(date2,(node)?xlv.util.getXmlNodeValue('date2',node):'');
							xlv.util.setElementValue(total,(node)?xlv.util.getXmlNodeValue('total',node):'');
							xlv.util.findChild(this.$V.toolBar,{id:'money'},false,false).style.display=(node)?'':'none';
						},
						fillOrderSheet:function(pat,node){
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'date'},true,false),xlv.util.getXmlNodeValue('date',node));
							this.$V.status=xlv.util.findChild(pat,{id:'status'},true,false);
							xlv.util.setElementValue(this.$V.status,(xlv.util.getXmlNodeValue('status',node)||'&nbsp;'));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'phone'},true,false),xlv.util.getXmlNodeValue('phone',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'mail'},true,false),xlv.util.getXmlNodeValue('mail',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'deliver'},true,false),xlv.util.getXmlNodeValue('deliver',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'payment'},true,false),xlv.util.getXmlNodeValue('payment',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'bonus'},true,false),xlv.util.getXmlNodeValue('bonus',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'discount'},true,false),xlv.util.getXmlNodeValue('discount',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'date2'},true,false),xlv.util.getXmlNodeValue('date2',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'time2'},true,false),xlv.util.getXmlNodeValue('time2',node));
							xlv.util.setElementValue(xlv.util.findChild(pat,{id:'addr'},true,false),xlv.util.getXmlNodeValue('addr',node));
						}
     	 			}"
     	 		>
     	 			<div id="slidebox_toolbar" style="position:relative;float:left;width:520px;background:url(/xlive/images/rst/headerBg_520.png) no-repeat left top; height:48px; line-height:30px; padding:6px 0px;">
     	 				<span id="order_id" style="float:left;line-height:30px;color:white;font-size:15px;padding:0px 8px"></span>
     	 				<span id="order_name" style="float:left;line-height:30px;color:white;font-size:15px;padding:0px 8px"></span>
     	 				<span id="order_date2" style="float:left;line-height:30px;color:white;font-size:15px;padding:0px 8px"></span>
     	 				<span id="money" style="display:none;float:right;line-height:30px;color:white;font-size:14px;padding:0px 16px 0px 8px">
     	 					&nbsp;$&nbsp;<span id="order_total" style="font-size:20px;"></span>
     	 				</span>
     	 			</div>
     	 			<div id="detail_pattern" style="float:left;width:516px;">
     	 				<div style="float:left;margin:8px 20px 8px 24px;color:white"><span style="line-height:30px">訂單日期 : <span id="date">2011-02-01 10:30</span></span>
     	 				</div>
     	 				<div style="float:right;margin:4px 20px 4px 0px">
     	 					<button id="cancel_order" style="width:100px;line-height:30px">取消訂單</button>
     	 					<button id="complete_order" style="width:100px;line-height:30px">訂單完成</button>
     	 				</div>
     	 				<div style="clear:both"></div>
     	 				<div style="margin:6px;padding:5px;border:1px solid white;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:url(/xlive/web/img?method=png&c=466281&o=0.5) top left repeat">
     	 				<div style="width:488px;font-size:13px;padding:0px;background:white;border:1px solid gray;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;">
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">訂單狀態</span>
     	 							<img id="advance" style="float:right;padding:10px 8px 8px 2px;" src="/xlive/images/pxml/advance.png"></img>
     	 							<span id="status" style="float:right;line-height:20px;padding:8px;width:320px;margin-right:4px;text-align:right;color:blue;"></span>
     	 							<div style="clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 						</div>	
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px;">電話號碼</span>
     	 							<span id="phone" style="float:left;line-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue;"></span>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px;">信箱</span>
     	 							<span id="mail" style="float:left;line-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue"></span>
     	 							<div style="clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 						</div>	
     	 						<div>	
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">交貨方式</span>
     	 							<span id="deliver" style="float:left;line-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue;"></span>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px;">付款方式</span>
     	 							<span id="payment" style="float:left;lpaymentine-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue"></span>
     	 							<div style="clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 						</div>
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">紅利</span>
     	 							<span id="bonus" style="float:left;line-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue;"></span>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px;">折扣</span>
     	 							<span id="discount" style="float:left;line-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue"></span>
     	 							<div style="clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 						</div>	
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">貨到日期</span>
     	 							<span id="date2" style="float:left;line-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue;"></span>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px;">貨到時間</span>
     	 							<span id="time2" style="float:left;line-height:20px;padding:8px;width:140px;margin-right:4px;text-align:right;color:blue"></span>
     	 							<div style="clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 						</div>
     	 						<div>
     	 							<span style="float:left;line-height:20px;padding:8px;width:60px;margin-left:4px">送貨地址</span>
     	 							<img style="float:right;padding:10px 8px 8px 2px;" src="/xlive/images/pxml/advance.png"></img>
     	 							<span id="addr" style="float:right;line-height:20px;padding:8px;width:340px;margin-right:4px;text-align:right;color:blue"></span>
     	 						</div>		
     	 						<div style="clear:both;"></div>
     	 				</div>
     	 				</div>
     	 				
     	 				<div id="detail_count" style="clear:both;float:left;margin:8px 20px 8px 32px;color:white"></div>
     	 				<div id="detail_goods" xlvobject="xlv.obj.generic"
     	 					xlvmethod="{
     	 						construct:function(){
									this._pattern=xlv.util.findChild(this,{id:'goods_pattern'},false,false);
									if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
     	 						},
     	 						build:function(node){
     	 							var dm=this.getDataModel('order');
     	 							var gs=dm.xml_selectNodes('goods-list/goods',node);
     	 							for(var i=0; i &lt; gs.length;++i){
     	 								var prod=xlv.sys.clonePatternNode(this._pattern);
     	 								this.appendChild(prod);
     	 								xlv.sys.initialize(prod);
     	 								prod.pNode=gs[i];
     	 								this.refresh(prod);
     	 							}
     	 						},
     	 						refresh:function(prod){
     	 							var node=prod.pNode;
									var src=xlv.util.getXmlNodeValue('icon',node);
									if(src) xlv.util.findChild(prod,{id:'icon'},false,false).imgSrc(src);
									xlv.util.setElementValue(xlv.util.findChild(prod,{id:'name'},false,false),(xlv.util.getXmlNodeValue('name',node)||'&nbsp;'));
									var optval=xlv.util.getXmlNodeValue('optval',node);
									var price=xlv.util.getXmlNodeValue('price',node);
									xlv.util.setElementValue(xlv.util.findChild(prod,{id:'price'},false,false),(parseInt(price)+parseInt(optval)));
									var options=xlv.util.getXmlNodeValue('options',node);
									xlv.util.findChild(prod,{id:'options'},false,false).innerHTML=this.addColor(options);
									var addons=xlv.util.getXmlNodeValue('addons',node);
									xlv.util.findChild(prod,{id:'addons'},false,false).innerHTML=this.addColor(addons);
									var qty=xlv.util.getXmlNodeValue('qty',node);
									xlv.util.setElementValue(xlv.util.findChild(prod,{id:'qty'},false,false),qty);
									xlv.util.setElementValue(xlv.util.findChild(prod,{id:'subtotal'},false,false),(parseInt(price)+parseInt(optval))*parseInt(qty));
     	 						},
     	 						addColor:function(options){
     	 							var ops=options.split('&nbsp;');
     	 							var ret='';
     	 							for(var i=0;i &lt; ops.length;++i){
     	 								if(ops[i].strip().length &lt; 1)continue;
     	 								ret+= ops[i].replace(':',':&nbsp;&lt;span style=\'color:blue\'&gt;');
     	 								ret+='&lt;/span&gt; &nbsp;';
     	 							}
     	 							return ret;
     	 						}
     	 					}"
     	 				>
     	 					<div id="goods_pattern" style="position:relative;float:left;width:480px;;margin:4px 0 0 16px">
     		 					<div style="padding:5px;position:relative;border:1px solid white;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:url(/xlive/web/img?method=png&c=466281&o=0.5) top left repeat;">
     		 						<div style="position:relative;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:white">
         								<div id="icon" xlvobject="xlv.obj.ximg" style="float:left;width:50px;height:50px;padding:7px 10px 7px 7px;"></div>
         								<div style="line-height:20px;padding-top:6px;font-weight:bold;font-size:15px;">
               	    						<span id="name"></span>
                  		  				</div>
         								<div style="line-height:20px;font-size:12px;">
               	    						<span id="options"></span>
                    					</div>
                    					<div style="line-height:20px;padding-bottom:4px;font-size:12px;">
                    						<span id="addons"></span>
                    					</div>
                    					<div style="position:absolute;line-height:30px;top:15px;right:4px;">
                    						<span id="qty" style="font-size:16px;font-weight:bold"></span><span style="font-size:12px;padding:4px 0px 4px 4px;margin:0px;">x</span>
                    						<img src="/xlive/images/rst/icon_m.png" style="margin-top:2px 0 0 0;"></img>
                    						<span id="price" style="font-size:14px;"></span>
                    						<span style="font:12px;padding:4px 4px 4px 0px">=</span><span id="subtotal" style="font-size:16px;font-weight:bold;margin-right:8px"></span>
                    					</div>
                    					<div style="clear:both"></div>
                	    			</div>
                	    		</div>
  		   	 				</div>
     	 					
     	 				</div>
     	 				
     	 			</div>
     	 		</div>
     	 	</div>
     	 	
		</div>
 
 		<div style="clear:both;margin-bottom:16px"></div>
         
		<style>
			#update_status #item_pattern #checked {display:none} 
			#update_status #item_pattern.checked #checked {display:inline-block} 
			#update_status #item_pattern #name {color:black} 
			#update_status #item_pattern.checked #name {color:blue} 
		</style>
		<div id="update_status" style="display:none;position:fixed;overflow:hidden;background:url(/xlive/web/img?method=png&c=ffffff&o=0.01) top left repeat;left:0px;top:0px;right:0px;bottom:0px"
    		xlvobject="xlv.obj.generic"
    		xlvmethod="{
    			construct:function(){
    				this.getParentById('order_main').$V.update_status=this;
    				this.$V.pxml=xlv.util.findChild(this,{id:'pxml_dialog'},false,false);
    			},
    			initial:function(){
					this.addEventHandler((Prototype.Browser.IE)?'mousewheel':'DOMMouseScroll', '_mousewheel', this.$V.viewport);
    			},
    			_mousewheel:function(event){
    				event.stop();
    			},
    			open:function(parent,node,callback){
    				this.$V.callback=callback;
    				var lt=this.getDesktop().viewportOffset(parent);
    				this.style.display='block';
    				this.$V.pxml.style.top=this.offsetHeight+'px';
    				this.$V.pxml.style.display='block';
    				//
    				var options='確認,備料,製作,待送,在途,完成';
    				var values='';
    				node.setAttribute('options',options);
    				node.setAttribute('values',values);
    				//
    				this.$V.pxml.build(node);
    				this.$V.pxml.style.left=(lt.left+parent.offsetWidth-240)+'px';
    				var top=lt.top+parent.offsetHeight-((Prototype.Browser.IE)? document.body.parentNode.scrollTop: window.scrollY);
    				var options={element:this.$V.pxml,style:{'top':top}};
    				xlv.util.styleEffect(options);
    			},
    			close:function(commit){
    		   		var options={element:this.$V.pxml,style:{top:this.offsetHeight}};
    		   		options.finished=function(){
    					this.style.display='none';
    					this.$V.pxml.style.display='none';
    		   		}.bind(this);
    				xlv.util.styleEffect(options);
    				if(commit){
    					this.getParentById('order_main').$V.order_detail.updateRefresh();
    					this.getParentById('order_main').$V.orders.refreshCurrentOrder();
    				}
    			}
    		}"
    	>
	  		<div id="pxml_dialog" xlvobject="xlv.obj.generic" 
	  			style="position:relative;width:200px;padding:8px;background:url(/xlive/web/img?method=png&c=466281&o=0.5) top left repeat;border:1px solid white;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius: 8px;-moz-box-shadow:0 0 5px 5px #aaa;-webkit-box-shadow: 0 0 5px 5px #aaa;box-shadow: 0 0 5px 5px #aaa;"
	  			xlvmethod="{
	  				construct:function(){
						this._pattern=xlv.util.findChild(this,{id:'item_pattern'},false,false);
						if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
	  				},
	  				initial:function(){
	  					this.addEventHandler('click','_click');
	  				},
	  				build:function(node){
	  					this.$V.pNode=node;
	  					var area=xlv.util.findChild(this,{id:'item_area'},false,false);
	  					while(area.firstChild) xlv.sys.dispose(area.firstChild,true);
						var options=node.getAttribute('options');
						var values=''+(node.getAttribute('values')||node.getAttribute('options'));
						var data=xlv.util.getXmlText(node);
						var options=options.split(',');
						var values=values.split(',');
						for(var i=0;i<options.length;++i){
							var item=xlv.sys.clonePatternNode(this._pattern);
							var name=xlv.util.findChild(item,{id:'name'},false,false);
							var chk=xlv.util.findChild(item,{id:'checked'},false,false);
							var sep=xlv.util.findChild(item,{id:'sep'},false,false);
     	 					area.appendChild(item);
     	 					xlv.sys.initialize(item);
     	 					xlv.util.setElementValue(name,options[i]);
							item.option=(options[i]||'');
							item.optval=(values[i]||'');
							var checked=(item.option!='' && data.indexOf(item.option)>=0);
							if(checked) Element.addClassName(item,'checked');
							sep.style.display=(i<options.length-1)?'':'none';
						}
	  				},
	  				_click:function(event){
	  					var target=event.target;
	  					if(target.id=='complete'){
	  						event.stop();
	  						return this.complete();
	  					}
	  					if(target.id=='cancel'){
	  						event.stop();
	  						return this.cancel();
	  					}
	  					var item=this.targetElement(target,{id:'item_pattern'});
	  					if(item){
	  						event.stop();
	  						return Element.toggleClassName(item,'checked');
	  					}
	  				},
	  				complete:function(){
	  					var items=xlv.util.children(this,{id:'item_pattern'});
	  					var options='';
	  					for(var i=0; i &lt; items.length;++i){
	  						if(Element.hasClassName(items[i],'checked')){
	  							var optval=(items[i].option||'');
	  							options += ((options!='')?',':'')+optval;
	  						}
	  					}
	  					xlv.util.setXmlText(this.$V.pNode,options);
	  					this.getParentById('update_status').close(true);
	  				},
	  				cancel:function(){
	  					this.getParentById('update_status').close(false);
	  				}
	  			}"
	  		>
	  			<div id="header" style="position:relative;height:32px;background:url(/xlive/images/rst/popupHeader.png) top left repeat;">
	  				<div id="complete" style="float:left;margin:2px 4px;background:url(/xlive/images/rst/btnd_left_arrow.png) no-repeat left top;color:#FFF;padding:0px 6px 0px 6px;display:inline-block;">
	  					<span id="complete" style="font-size:13px;background:url(/xlive/images/rst/btnd_right.png) no-repeat right top;padding:0px 6px 10px 6px;margin-right:-10px;display:inline-block;line-height:24px;cursor:pointer;">完成</span>
	  				</div>
	  				<img id="cancel" src="/xlive/images/rst/close_dialog.png" style="position:absolute;top:0px;right:0px"></img>
	  				<span style="color:white;font-size:13px;line-height:30px;margin-left:12px">訂單狀態設定</span>
	  			</div>
	  			<div id="content" style="positione:relative;left:0px;top:0px;right:0px;bottom:0px;background:white">
     	 			<div style="clear:both;height:1px">&nbsp;</div>
     	 			<div style="font-size:13px;margin:4px 8px;padding:0px;background:white;border:1px solid gray; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;">
     	 				<div id="item_pattern">
     	 					<div id="name" style="float:left;line-height:20px;padding:8px;margin-left:4px"></div>
     	 					<img id="checked" style="float:right;padding:6px 8px 6px 2px;" src="/xlive/images/pxml/checked.png"></img>
     	 					<div style="clear:both;"></div>
     	 					<div id="sep" style="display:none;clear:both;border-top:1px solid gray;width:100%;margin:4px 0px"></div>
     	 				</div>
     	 				<div id="item_area">
     	 				</div>
     	 				<div style="clear:both;"></div>
     	 			</div>
     	 			<div style="clear:both;height:8px;">&nbsp;</div>
	  			</div>
	  		</div>
		</div>
		
		
		
		
		<div id="set_status" style="display:none;position:fixed;overflow:hidden;background:url(/xlive/web/img?method=png&c=ffffff&o=0.01) top left repeat;left:0px;top:0px;right:0px;bottom:0px"
    		xlvobject="xlv.obj.generic"
    		xlvmethod="{
    			construct:function(){
    				this.getParentById('order_main').$V.set_status=this;
    				this.$V.pxml=xlv.util.findChild(this,{id:'pxml'},false,false);
    			},
    			initial:function(){
					this.addEventHandler((Prototype.Browser.IE)?'mousewheel':'DOMMouseScroll', '_mousewheel', this.$V.viewport);
    			},
    			_mousewheel:function(event){
    				event.stop();
    			},
    			open:function(parent,node){
    				var lt=this.getDesktop().viewportOffset(parent);
    				this.style.display='block';
    				this.$V.pxml.style.top=this.offsetHeight+'px';
    				this.$V.pxml.style.display='block';
    				this.$V.pxml.build(node);
    				this.$V.pxml.style.left=(lt.left+parent.offsetWidth-280)+'px';
    				var top=lt.top+parent.offsetHeight-((Prototype.Browser.IE)? document.body.parentNode.scrollTop: window.scrollY);
    				var options={element:this.$V.pxml,style:{'top':top}};
    				xlv.util.styleEffect(options);
    			},
    			close:function(){
    		   		var options={element:this.$V.pxml,style:{top:this.offsetHeight}};
    		   		options.finished=function(){
    					this.style.display='none';
    					this.$V.pxml.style.display='none';
    		   		}.bind(this);
    				xlv.util.styleEffect(options);
    			}
    		}"
    	>
    		<div id="pxml" xlvobject="xlv.obj.pxmlWriter"  style="width:240px" class="pxml_border_radius pxml_shadow"
	    		xlvprop="{completeString:'完成'}"
	  			xlvmethod="{
	  				build:function(node){
	  					var dm = this.getDataModel('status');
	  					this.$V.pxmlNode=dm.getNode('list.return.data.pxml').cloneNode(true);
	  					this.$self('build',this.$V.pxmlNode);
	  				},
	  				complete:function(){
	  					var dm = this.getDataModel('status');
	  					var node=dm.getNode('list.return.data.pxml');
	  					if(this.$V.pxmlNode &amp;&amp; dm.xml_nodeToString(node)!=dm.xml_nodeToString(this.$V.pxmlNode)){
	  						var pxml=dm.getNode('set-status.pxml');
	  						pxml.parentNode.appendChild(this.$V.pxmlNode);
	  						pxml.parentNode.removeChild(pxml);
	  						this.$V.pxmlNode=null;
	  						dm.webMethod('set-status');
	  					}else {
							this.getParentById('set_status').close();
	  					}
	  				},
	  				cancel:function(){
	  					this.getParentById('set_status').close();
	  				},
	  				addSelectXml:function(gli){
	  					var s=this.$self('addSelectXml',gli);
	  					s.setAttribute('showValue','true');
	  					s.setAttribute('multiple','true');
	  					return s;
	  				}
	  			}"
	  		>
	  		</div>


		</div>
		
		
		
	</div>
</body>
</html>
